import { useEffect, useState } from "react";
import Styles from "./index.module.scss";
import { Checkbox, Popup } from "antd-mobile";
const Index: React.FC<any> = (props: any) => {
    let { vis, openGroupPopup, changeGroup, groupData } = props
    let [visible, setVisible] = useState(false)
    useEffect(() => {
        setVisible(vis)
    }, [vis])
    let [checkedList, setCheckedList] = useState(groupData)
    const cancel = () => {
        openGroupPopup(false)
    }
    const enter = () => {
        changeGroup(checkedList)
        openGroupPopup(false)
    }

    const checkedTeams = (cindex: number, lindex: number, e:any) => {
        setCheckedList((list: any) => {
          const data = list.map((citem: any, cidx: any) => {
            if (cidx == cindex) {
              citem?.teams?.map((item:any, tindex: number) => {
                if(tindex == lindex){
                  item.isSelect = Number(e)
                }
                return item
              })
            }
            return citem
          })
          return [...data]
        })
      }

    return (
        <>
            <Popup
                visible={visible}
                onMaskClick={() => {
                    openGroupPopup(false)
                }}
            >
                <div
                    style={{ minHeight: '60vh', overflowY: 'scroll', borderTopLeftRadius: '8px', borderTopRightRadius: '8px' }}
                >
                    <div className={Styles.GroupPopup}>
                        <div className={Styles.btns}>
                            <div className={Styles.item} onClick={() => cancel()}>取消</div>
                            <div className={`${Styles.item} ${Styles.active}`} onClick={() => enter()}>确定</div>
                        </div>
                        <div className={Styles.tips}>请选择小分队</div>
                        {checkedList.map((item: any, index: any) => {
                            return (<div className={Styles.groupBlock} key={index}>
                                <div className={Styles.groupBlockTitle}>{item.deptName}</div>
                                <div className={Styles.groupContent}>
                                    {item.teams.map((value: any, idx: any) => {
                                        const leaderMessge = value?.info?.find((element: any) => element?.identityType == 1)
                                        let team: any = []
                                        value?.info?.forEach((teams: any) => {
                                            if (teams?.identityType == 2) {
                                                team?.push({ ...teams })
                                            }
                                        })
                                        return (<div className={Styles.groupItem} key={idx}>
                                            <div className={Styles.groupIdentity}>
                                                <Checkbox
                                                    checked={value.isSelect == 1 ? true : false}
                                                    onChange={(e) => checkedTeams(index, idx, e)}
                                                    style={{
                                                        "--icon-size": "15px",
                                                        "--gap": "8px",
                                                    }}
                                                ></Checkbox><span style={{fontWeight: 'bolder'}}>带队领导：</span>{leaderMessge.name}（{leaderMessge?.phone}）
                                            </div>
                                            <div style={{ display: 'flex', marginLeft: '18px' }}>
                                                <div style={{ minWidth: '65px', fontWeight: 'bolder' }}>分组成员：</div>
                                                <div className={Styles.groupIdentity} style={{ display: 'flex', flexWrap: 'wrap' }}>
                                                    {team?.map((el: any) => {
                                                        return <div style={{ marginRight: '6px', marginBottom: '6px' }}>{el?.name}({el?.phone})</div>
                                                    })}
                                                </div>
                                            </div>
                                        </div>)
                                    })}
                                </div>
                            </div>)
                        })}
                    </div>
                </div>
            </Popup>
        </>
    )
};
export default Index;